<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<title>二次设备评估</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
.small-box .list {
	position: absolute;
	top: -10px;
	right: 10px;
	z-index: 0;
	font-size: 16px;
	color: rgba(0, 0, 0, 0.15);
}
.small-box .fa{
	margin:10px;
}
.num{
	font-size:26px;
	font-weight: 600;
}
.badge{
	margin:3px;
	cursor:pointer;
}
.sparkpie{
	margin:6px;
	display:none;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class='full-center-content-scroll-noheader'>
		<div class="box">
			<div class="box-body">
			<div class="row" id="infoRow">
				<div class="col-lg-3 col-xs-6">
					<div class="small-box bg-green">
						<div class="inner">
							<span style="font-size:38px;"><i class="fa fa-home" title="厂站"></i><span class="num" id="zcStation" style="margin-right:20px;">0</span>
							<i class="fa fa-clone" title="二次设备"></i><span class="num" id="zcDevice">0</span></span>
							<p>正常</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-xs-6">
					<div class="small-box bg-aqua">
						<div class="inner">
							<span style="font-size:38px;"><i class="fa fa-home" title="厂站"></i><span id="lStation" class="num" style="margin-right:20px;">0</span>
							<i class="fa fa-clone" title="二次设备"></i><span class="num" id="lDevice">0</span></span>
							<p>低风险</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-xs-6">
					<div class="small-box bg-yellow">
						<div class="inner">
							<span style="font-size:38px;"><i class="fa fa-home" title="厂站"></i><span id="mStation" class="num" style="margin-right:20px;">0</span>
							<i class="fa fa-clone" title="二次设备"></i><span class="num" id="mDevice">0</span></span>
							<p>中风险</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-xs-6">
					<div class="small-box bg-red">
						<div class="inner">
							<span style="font-size:38px;"><i class="fa fa-home" title="厂站"></i><span id="hStation" class="num" style="margin-right:20px;">0</span>
							<i class="fa fa-clone" title="二次设备"></i><span class="num" id="hDevice">0</span></span>
							<p>高风险</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row" id="chart">
				<div class="col-sm-6">
					<div class="box box-success">
						<div class="box-header">
							<i id="sIcon" class="fa fa-home" title="厂站"></i><span id="sPie" class="sparkpie"></span>风险厂站
							<!-- <span class="badge bg-yellow pull-right">风险明细</span>
							<span class="badge bg-blue pull-right">厂站列表</span> -->
						</div>
						<div class="box-body">
							<div id="stationPie" class="stationPie" style="height: 450px"></div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="box box-success">
						<div class="box-header">
							<i id="pIcon" class="fa fa-clone" title="二次设备"></i><span id="pPie" class="sparkpie"></span>风险设备
							<!-- <span class="badge bg-yellow pull-right">风险明细</span>
							<span class="badge bg-blue pull-right">设备明细</span> -->
						</div>
						<div class="box-body">
							<div id="devicePie" style="height: 450px"></div>
						</div>
					</div>
				</div>
			</div>
		</div></div></div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/plugins/sparkline/jquery.sparkline.min.js"></script>
		<script src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script src="protectAssment.js"></script>
		<script>
			$(function() {
				initData();
				var t1 = window.setInterval(function() {
					var w = $('#chart').width() + "";
					if (w != '0') {
						$("#stationPie").css("width", w / 2 - 20);
						$("#devicePie").css("width", w / 2 - 20);
						window.clearInterval(t1);
					}
				}, 20);
			});
		    $('.sparkpie').each(function(){
			      $(this).sparkline([1,1,5], {type: 'pie', height: '20px'});
		    });

		</script>
	</ui:define>
</ui:composition>
